<template>
	<view class="menu-box">
		<u-grid :border="true">
			<u-grid-item :customStyle="{ width: 220 + 'rpx', height: 150 + 'rpx' }" v-for="(item, index) in swiperList" :key="item.id" @click="jumpPage(item)">
				<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="24" :color="item.iconColor"></u-icon>
				<text class="grid-text">{{ item.name }}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperList: [
				{
					id: 1,
					name: '我的订单',
					icon: 'file-text',
					iconColor: '#40cd6a',
					path: '/packMyself/myOrder/myOrder'
				},
				{
					id: 2,
					name: '我的钱包',
					icon: 'red-packet-fill',
					iconColor: '#f8a724',
					path: '/packMyself/myWallet/myWallet'
				},
				{
					id: 3,
					name: '优惠券',
					icon: 'integral',
					iconColor: '#ec4575',
					path: '/packMyself/coupon/coupon'
				},
				{
					id: 4,
					name: '消息',
					icon: 'bell-fill',
					iconColor: '#29d5b4',
					path: '/packMyself/message/message'
				},
				{
					id: 5,
					name: 'IC卡管理',
					icon: 'fingerprint',
					iconColor: '#f3af3b',
					path: '/packMyself/nfc/nfc'
				},
				{
					id: 6,
					name: '帮助中心',
					icon: 'question-circle-fill',
					iconColor: '#8a8990',
					path: '/packMyself/help/help'
				},
				{
					id: 7,
					name: '关于我们',
					icon: 'info-circle-fill',
					iconColor: '#3dca60',
					path: '/packMyself/about/about'
				},
				{
					id: 8,
					name: '合作加盟',
					icon: 'server-man',
					iconColor: '#f97e6e',
					path: '/packMyself/investment/investment'
				},
				{
					id: 9,
					name: '设置',
					icon: 'setting-fill',
					iconColor: '#1f9a44',
					path: '/packMyself/setting/setting'
				},
			]
		};
	},
	methods: {
		jumpPage(item) {
			uni.navigateTo({
				url: item.path
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.menu-box {
	margin-top: 60rpx;
	background: #fff;
}

.grid-text {
	font-size: 24rpx;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
</style>
